<html>
<head>
  <style>
    div.panels 
    {
      flow:horizontal;
      border-spacing:10px;
      height:*;
    }
    div.panels > ul 
    {
      width:*;
      height:*;
      border: 3px solid silver;
    }
    
    div.panels > ul.goods
    {
      padding:0;
      border: none;
      width:max-intrinsic;
    }
    
    ul.goods > li 
    {
      draggable: only-copy; // the item can only be copied from here
      display:block;
      padding:4px;
      text-align:center;
      vertical-align:center;
    }
    ul.goods > li:active 
    {
      background-color: highlight;
      color: highlighttext;
    }
    
    ul.goods > li:copying /* style of element in dragging mode  */
    {
      opacity:0.5;
    }
    ul.goods > li:copying:drop-target /* dragging element arrived to valid drop_target  */
    {
      opacity:1.0;
    }
    
    ul.goods > li > label 
    {
      display: none;
    }
    ul.goods > li > img
    {
      width:48px;
    }
    
    /*
    *:drag-over:not(:drop-target)
    {
      cursor: crosshair;
    }*/
    
    ul.cart
    {
      padding:0;
      accept-drop: selector(ul.goods>li,ul.cart>li); /* accept drop of (ul.goods>li) and (ul.cart>li) elements only */ 
      outline-color: orange; /* color of insertion marker */
    }
    ul.cart:drop-target /* dragging operation is in effect and this element is the active target */  
    {
      background-color: lightyellow;
    }
    
    ul.cart:drag-over /* dragging operation is in effect and this element is the active target and dragged element is over this one */  
    {
      border-color:red;
    }
    
    ul.cart > li 
    {
      display:block;
      padding:4px;
      draggable: only-move;
      width:max-intrinsic;
    }
    ul.cart > li:active 
    {
      background-color: highlight;
      color: highlighttext;
    }
    
    ul.cart > li:moving /* style of element in dragging mode  */
    {
      opacity:0.5;
    }
    
    ul.cart > li:moving:drop-target /* moving and on the right drop-target*/
    {
      opacity:1.0;
    }
    
    ul.cart > li:drop-marker /* style of drop marker - placeholder for drop position  */
    {
      visibility:visible;
      background-color: #00BFFF;
      opacity:0.2;
    }
    
    ul.cart#first-cart > li
    {
      width:*;
    }
    ul.cart#first-cart > li > img
    {
      width:48px;
      vertical-align:middle;
    }
    ul.cart#first-cart > li > label
    {
      display:inline;
    }
    
    div.panels > ul.cart#second-cart
    {
      flow:h-flow;
    }
    
    ul.cart#second-cart > li
    {
      text-align:center;
      width:min-intrinsic;
    }
    ul.cart#second-cart > li > label
    {
      display:inline-block;
    }
    
    .trash
    {
      accept-drop: selector(ul.cart>li); /* accept drop of items only from carts */ 
      drop: recycle; /* delete element on drop */
      visibility:hidden; // normally it is not visible
      position:fixed;
      background-color: #AFEEEE;
      padding-left:70px;
      background-image:url(images/recycle.png);
      background-repeat:no-repeat;
      background-position:2px center;
      vertical-align:middle;
      width:10em;
      min-height:72px;
      bottom:0;
      right:0;
    }
    
    .trash:drop-target /* dragging operation is in effect and this element is the active target */  
    {
      visibility:visible; // but when it is an active target it is visible
    }
    
    .trash:drag-over /* dragging operation is in effect and this element is the active target and dragged element is over this one */  
    {
      border-color:blue;
    }
    
  </style>  
<head>
<body>
  <h1>Drag-n-drop demo. Simple shopping cart.</h1>
  <p>Enjoy dragging items from left side to carts on the right.</p>
  <div .panels>
    <ul .goods>
      <li><img src="images/item1.png"><label>Knight</label></li>
      <li><img src="images/item2.png"><label>Driver</label></li>
      <li><img src="images/item3.png"><label>Cleaner</label></li>
      <li><img src="images/item4.png"><label>Fireman</label></li>
    </ul>
    <ul .cart #first-cart></ul>
    <ul .cart #second-cart></ul>
  </div>
  <div .trash >Drag it here to delete from the cart.</div>
</body>
</html>
